<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch" action="${request.getContextPath()}/FinalTrendPassYieldByMonth/finalTrendPassYieldByMonth" method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="SYS_QUERY_NAME" value="finalTrendPassYieldByMonth" />
            <g:hiddenField name="EXPORT_CONTENT_NAME" value="Excel" />
            <label>客户：</label>
            %{--<g:select name="customerLotId" from="${customerLotIdList}" data-toggle="selectpicker" data-live-search="true"--}%
                      %{--optionKey="CUSTOMER_LOT_ID" optionValue="CUSTOMER_LOT_ID" value="${customerLotId}" data-width="130"--}%
                      %{--noSelection="['': '-- All --']"/>&nbsp;--}%
            <g:textField name="customerLotId" value="${customerLotId}" size="15" placeholder="客户" />&nbsp;
            <label >方向：</label>
            <g:select name="customerDirect" from="${partDirect}" data-toggle="selectpicker" data-live-search="true"
                  optionKey="description" optionValue="text" value="${customerDirect}" data-width="130"
                  noSelection="['':'-- All --']" />&nbsp;
            <label>客户图号：</label>
            <input type="text" name="group4" value="${group4}" size="17" placeholder="客户图号"/>&nbsp;
            <label>内部图号：</label>
            <input type="text" name="group3" value="${group3}" size="17" placeholder="内部图号"/>&nbsp;
            %{--<label>检查工序：</label>
            <g:select name="stepDesc" from="${checkStepList}" data-toggle="selectpicker" data-live-search="true"
                      optionKey="step_name" optionValue="step_desc" value="${stepDesc}"
                      noSelection="['':'-- All --']" />--}%
            <label>检查工序：</label>
            <g:select name="stepDesc" from="${checkStepList}" data-toggle="selectpicker" data-live-search="true"
                      optionKey="step_name" optionValue="step_desc" value="${stepDesc}" data-width="150"
                      noSelection="['': '-- All --']"/>
            <br /><br />
            <label>送检时间<strong><span class="text-danger">*</span></strong>：</label>
            <input type="text" name="startTime" readonly value="${startTime}" data-rule="required"
                   data-pattern="yyyy-MM" size="9" data-toggle="datepicker" placeholder="FROM">
            <input type="text" name="endTime" readonly value="${endTime}" data-rule="required"
                   data-pattern="yyyy-MM" size="9" data-toggle="datepicker" placeholder="TO">&nbsp;
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
            %{--<button type="button" class="btn-blue" onclick="javascript:bjuiExportExl('#pagerForm','${request.getContextPath()}/StageWip/exportExcel')" --}%
                    %{--data-icon="file-excel-o" title="导出Excel">导出</button>--}%
            <a type="button" class="btn btn-blue" href="${request.getContextPath()}/Base/exportExcel"
               data-toggle="doexport" data-confirm-msg="确定要导出吗？" data-icon="file-excel-o" title="导出Excel">导出</a>
        </div>
    </form>
</div>

<div class="panel-body">
    <div style="mini-width:400px;height:450px;" id="cellGlassOutputDiv"></div>
</div>

<div class="bjui-pageContent">
    <g:if test="${finalTrendPassYieldByMonth.size() > 0}">
        <div id="finalTrendPassYieldByMonth" style="width:100%;height:58%;" ></div>
        <script  src="${request.getContextPath()}/js/echarts/echarts.js"></script>
        <script  src="${request.getContextPath()}/js/echarts/echarts-tool.js"></script>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var contextPath = "${request.getContextPath()}";
            eChartsTool.init(contextPath);
            var data=[];
            data.push('1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月');


            // 指定图表的配置项和数据
            var option = {
                /*backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色*/
                // 图表标题
                title: {

                },

                tooltip : {
                    trigger: ''
                },

                legend: {
                    data:['实际合格率','目标合格率']

                },
                xAxis: {
                    data:data
                },
                yAxis : [
                    /*  {
                     type : 'value'
                     },*/
                    {
                        type : 'value',
                        name:'缺陷占比',

                        axisLabel : {
                            formatter: '{value}%'
                        },
                        show:true
                    }
                ],
                series : [
                    {
                        name: '实际合格率',
                        type: 'line',
                        data:${finalTrendPassYieldByMonthPic.YIELD}
                    },
                    {
                        name: '目标合格率',
                        type: 'line',
                        data:${finalTrendPassYieldByMonthPic.KEY_ID}
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            eChartsTool.setOption("roma", document.getElementById('finalTrendPassYieldByMonth'), option);
        </script>
        <div>
            <table  data-toggle="tablefixed" data-width="100%" data-nowrap="true">
                <thead>
                <tr id="t1">
                    <th width="125">月份</th>
                    <g:each in="${tableHeadList}" status="j" var="headInstance">
                        <g:if test="${headInstance!='RN'&&headInstance!='BS'}">
                            <th  width="125"><g:message code="${headInstance}" default="${headInstance}"/></th>
                        </g:if>
                    </g:each>
                </tr>
                </thead>
                <tbody>
                <g:if test="${finalTrendPassYieldByMonth.size()>0}">
                    <g:each in="${finalTrendPassYieldByMonth}" status="i" var="dataInstance">
                        <tr>
                            <td>${dataInstance.BS}合格率(%)</td>
                            <g:each in="${tableHeadList}" status="j" var="headInstance">
                                <g:if test="${headInstance!='RN'&&headInstance!='BS'}">
                                    <td>${dataInstance["${headInstance}"]}</td>
                                </g:if>
                            </g:each>
                        </tr>
                    </g:each>
                %{--<tr>
                    <td colspan="6">小计(当前页)</td>
                    <td name="sum">0</td>
                </tr>
                <tr>
                    <td colspan="6">合计(总)</td>
                    <td >${orderStatusAnalysisStepSum[0].SUM_QTY}</td>
                </tr>--}%
                </g:if>
                </tbody>
            </table>
        </div>
    </g:if>
    <g:else>
        <g:render template="../template/emptyPanel" />
    </g:else>
</div>
%{--
<script>
    $(function(){
        var s=0;
        for(var i=0;i<${orderStatusStepTwo.size()};i++){
            var s1='qty'+i
            var sumS=$("td[name='"+s1+"']").text()==''?0:parseInt($("td[name='"+s1+"']").text())
            s+=sumS


        }
        $("td[name='sum']").html(s)

    })
</script>--}%
